<template>
  <div class="page-container">
    <Carousel :items="carouselItems">
      <template #item="{ item, index, active }">
        <div class="custom-carousel-item" :class="{ active: active }">
          <img
            :src="item.imageUrl"
            alt="Banner"
            class="custom-image"
            :class="{ 'scale-105': active }"
          />
          <div class="custom-caption" v-show="item.id === 1">
            <div class="caption-content">
              <div class="caption-title">
                <p>{{ $t(`banner.商家`) }}</p>
              </div>
              <div class="caption-text">
                <label></label>{{ $t(`banner.帮您高效+精准链接`)
                }}<span>{{ $t(`banner.全球`) }}</span
                >{{ $t(`banner.带货红人`) }}
              </div>
              <div class="caption-text">
                <label></label>{{ $t(`banner.精准品牌匹配度+助力商家轻松`)
                }}<span>{{ $t(`banner.盈利`) }}</span>
              </div>
              <div class="caption-text">
                <label></label><span>{{ $t(`banner.千万流量`) }}</span
                >{{ $t(`banner.扶持+`) }}<span>{{ $t(`banner.全渠道`) }}</span
                >{{ $t(`banner.支持，商家无忧合作`) }}
              </div>
            </div>
            <div class="caption-content">
              <div class="caption-title">
                <p>{{ $t(`banner.网红`) }}</p>
              </div>
              <div class="caption-text">
                <label></label><span>{{ $t(`banner.高佣金`) }}</span
                >{{ $t(`banner.结算+优质品牌长期合作`) }}
              </div>
              <div class="caption-text">
                <label></label>{{ $t(`banner.流量轻松`)
                }}<span>{{ $t(`banner.变现`) }}</span
                >{{ $t(`banner.，精准合作`) }}
              </div>
              <div class="caption-text">
                <label></label>{{ $t(`banner.一站式数据`)
                }}<span>{{ $t(`banner.全渠道`) }}</span
                >{{ $t(`banner.管理，全面提升粉丝增长和商业价值`) }}
              </div>
            </div>
          </div>
          <div v-show="item.id === 2" class="custom-caption top-161">
            <p class="title-note">Brand Partner Benefits & Perks</p>
            <h1 class="interests-title caption-text">
              {{ $t(`banner.商家`) }}<span>{{ $t(`banner.权益`) }}</span>
            </h1>
            <div class="interests-content">
              <div class="caption-text">
                {{ $t(`banner.帮您高效+精准链接`)
                }}<span>{{ $t(`banner.全球`) }}</span
                >{{ $t(`banner.带货红人`) }}
              </div>
              <div class="caption-text">
                {{ $t(`banner.精准品牌匹配度+助力商家轻松`)
                }}<span>{{ $t(`banner.盈利`) }}</span>
              </div>
              <div class="caption-text">
                <span>{{ $t(`banner.千万流量`) }}</span
                >{{ $t(`banner.扶持+`) }}<span>{{ $t(`banner.全渠道`) }}</span
                >{{ $t(`banner.支持，商家无忧合作`) }}
              </div>
            </div>
          </div>
          <div v-show="item.id === 3" class="custom-caption top-161 span-color">
            <p class="title-note">Exclusive Creator Perks & Rewards</p>
            <h1 class="interests-title caption-text">
              {{ $t(`banner.网红`) }}<span>{{ $t(`banner.权益`) }}</span>
            </h1>
            <div class="interests-content">
              <div class="caption-text">
                <span>{{ $t(`banner.高佣金`) }}</span
                >{{ $t(`banner.结算+优质品牌长期合作`) }}
              </div>
              <div class="caption-text">
                {{ $t(`banner.流量轻松`) }}<span>{{ $t(`banner.变现`) }}</span
                >{{ $t(`banner.，精准合作`) }}
              </div>
              <div class="caption-text">
                {{ $t(`banner.一站式数据`)
                }}<span>{{ $t(`banner.全渠道`) }}</span
                >{{ $t(`banner.管理，全面提升粉丝增长和商业价值`) }}
              </div>
            </div>
          </div>
          <div class="search-chunck">
            <el-select
              v-model="searchIconValue"
              placeholder="Select"
              @change="updateSelectedIcon"
              popper-append-to-body="false"
              :collapse-tags="true"
              :filterable="false"
            >
              <template #prefix>
                <img
                  v-if="selectedIcon"
                  :src="selectedIcon.iconUrl"
                  alt="Selected Icon"
                  class="selected-icon"
                  @error="handleImageError"
                />
              </template>
              <!-- 使用render函数自定义选中项显示 -->
              <template #content>
                <img
                  v-if="selectedIcon"
                  :src="selectedIcon.iconUrl"
                  alt="Selected Icon"
                  class="selected-icon"
                  @error="handleImageError"
                />
              </template>
              <el-option
                v-for="icons in searchIcon"
                :key="icons.value"
                :value="icons.value"
              >
                <img
                  :src="icons.iconUrl"
                  :alt="icons.iconUrl"
                  class="select-op-icon"
                />
              </el-option>
            </el-select>
            <div class="under-line"></div>
            <input
              class="text-input"
              type="text"
              :placeholder="$t(`banner.请输入网红的名称或内容类别`)"
            />
            <div class="search-button">
              <img
                src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng074dfa3b49bad8cd6fad7842d2ce40d1506750aae97a77bb489635b8bf24d6d4?noCache=true"
                alt=""
              />
            </div>
          </div>
        </div>
      </template>
    </Carousel>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import Carousel from "./carousel-component.vue"
import { searchIcon } from "../methods/index"
import { useI18n } from "vue-i18n"
const { locale, t } = useI18n({
  useScope: "global",
})
const searchIconValue = ref(0)
const selectedIcon = ref(null)

const carouselItems = [
  {
    id: 1,
    imageUrl: "../../src/assets/banner.png",
  },
  {
    id: 2,
    imageUrl:
      "https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbe47a4e5ff29c6bf7713710a9dcb9cdba67c86078386f010c3094ea53e31fc7a?noCache=true",
  },
  {
    id: 3,
    imageUrl: "../../src/assets/banner3.png",
  },
]

const onCarouselChange = (index: number) => {
  console.log("当前轮播图索引:", index)
}

const updateSelectedIcon = () => {
  selectedIcon.value = searchIcon.find(
    (item) => item.value === searchIconValue.value
  )
}

onMounted(() => {
  updateSelectedIcon()
})
</script>
<style scoped>
.custom-carousel-item {
  position: relative;
}
.custom-image {
  width: 100%;
  height: 100%;
}
.custom-caption,
.search-chunck {
  position: absolute;
  top: 136px;
  left: 110px;
}
.search-chunck .el-select {
  width: 88px;
  height: 38px;
  background: #f5ebfe;
  border-radius: 8px;
  border: 1px solid #a43aff;
}
.top-161 {
  top: 161px;
}
.caption-content {
}
.caption-title {
  width: 178px;
  height: 36px;
  padding-left: 14px;
  background: linear-gradient(
    270deg,
    rgba(164, 58, 255, 0) 0%,
    rgba(208, 108, 255, 0.8) 100%
  );
  border-radius: 4px;
}
.caption-title p {
  width: 48px;
  height: 33px;
  font-family: AlibabaPuHuiTi_2_85_Bold;
  font-size: 24px;
  color: #ffffff;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin: 0;
  padding: 0;
}
.caption-text {
  color: #ffffff;
  height: 40px;
  line-height: 40px;
}

.caption-text label {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #ffffff;
  margin-right: 10px;
}

.caption-text span {
  color: #b866ff;
}
.custom-title {
}
.top-161 .interests-content {
  margin-top: 41px;
}
.title-note {
  /* width: 354px; */
  height: 33px;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-size: 24px;
  color: #ffffff;
  line-height: 33px;
  text-align: left;
  font-style: normal;
}
.interests-title {
  /* width: 229px; */
  height: 81px;
  font-family: AlibabaPuHuiTi_2_95_ExtraBold;
  font-size: 58px;
  color: #ffffff;
  line-height: 81px;
  text-align: left;
  font-style: normal;
}
.span-color .caption-text span {
  color: #ff71a6;
}
.search-chunck {
  top: 528px;
  width: 440px;
  height: 54px;
  background: #ffffff;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  padding: 8px;
}
.search-chunck:hover {
  width: 440px;
  height: 54px;
  background: #ffffff;
  box-shadow: 0px 6px 15px 0px rgba(36, 47, 67, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.selected-icon {
  width: 23px;
  height: 24px;
  object-fit: cover;
}
.select-op-icon {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
:deep(.el-select__wrapper) {
  border: 0px solid none !important;
  box-shadow: none !important;
  background: transparent;
}
/* 增加选择器的特异性 */
:deep(.el-select-dropdown__item.el-option) {
  position: relative;
}
.search-button img {
  width: 60px;
  height: 38px;
  cursor: pointer;
}

.under-line {
  width: 1px;
  height: 22px;
  margin: 8px 24px;
  border: 1px solid #e9e9e9;
}
.text-input {
  border: none;
  flex: 1;
}
.text-input:focus {
  outline: none;
  border: none;
}
/* 完全隐藏选择器中的文本 */
.el-select .el-input__inner {
  text-indent: -9999px;
}

/* 确保前缀图标正常显示 */
.el-select .el-input__prefix {
  left: 5px !important;
}

/* 调整图标位置 */
.selected-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
</style>
